<template>
  <div class="title">
    <div class="title-left">
      <div class="title-left-image"></div>
      <router-link to="/">
        <span :style="{ color: index === 'index' ? conFontColor : '#000' }"
          >首页</span
        >
      </router-link>
      <router-link to="/home/kind">
        <span
          class="title-left-kind"
          :style="{ color: index === 'kind' ? conFontColor : '#000' }"
          >分类</span
        >
      </router-link>
      <router-link to="/home/bookshelf">
        <span
          class="title-left-bookShelf"
          :style="{ color: index === 'bookshelf' ? conFontColor : '#000' }"
          >我的书架</span
        >
      </router-link>
      <router-link :to="'/home/userCenter/'+user.id+'/myComments'">
        <span
          class="title-left-userCenter"
          :style="{ color: index === 'userCenter' ? conFontColor : '#000' }"
          >个人中心</span
        >
      </router-link>
    </div>
    <div class="serach">
      <input v-model="inputValue" class="inputType" placeholder="请输入文字" />
      <!-- <div contenteditable class="inputType" placeholder='请输入文字'  :key="input"></div> -->
      <div class="button" @click="searchBook">搜索</div>
    </div>
    <div class="title-right">
      <div>
        <div v-if="isLogin">
          <el-avatar class="title-right-image" :size="40" :src="user.avatar" />
          <el-dropdown>
            <div class="title-right-name">
              <el-text class="title-right-name">{{ user.username }}</el-text>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="toBookShelf"
                  >我的书架</el-dropdown-item
                >
                <el-dropdown-item @click="toUserCenter"
                  >个人中心</el-dropdown-item
                >
                <el-dropdown-item @click="logout" divided
                  >退出登录</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <router-link v-else to="/login">
          <span class="">未登录</span>
        </router-link>
      </div>
    </div>
  </div>
</template>
  <script>
import { getUserInfo } from "@/api/userCenter";
import { removeInfo } from "@/utils/storage";
import { ElMessage, ElMessageBox } from "element-plus";
export default {
  name: "HeaderView",
  data() {
    return {
      inputValue: "",
      isLogin: false,
      index: "",
      conFontColor: "red",
      user: {},
    };
  },
  methods: {
    // 退出登录
    logout() {
      ElMessageBox.confirm("确认要退出登录吗?", "退出登录", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          removeInfo();
          ElMessage({
            type: "success",
            message: "退出登录成功",
          });
          location.reload();
        })
        .catch(() => {});
    },
    // 搜索书籍
    async searchBook() {
      if (this.inputValue !== "") {
        this.$router
          .push({
            path: "/home/search",
            query: {
              keyword: this.inputValue,
            },
          })
          .then(() => {});
      }
    },
    // 获取用户信息
    async getUserInfo() {
      const res = await getUserInfo(this.getLoginInfo);
      if (res.data.success) {
        this.user = res.data.result;
      }
    },
    // 跳转到我的书架
    toBookShelf() {
      this.$router.push("/home/bookshelf");
    },
    // 跳转到个人中心
    toUserCenter() {
      this.$router.push("/home/userCenter/"+this.user.id+"/myComments");
    },
  },
  computed: {
    getLoginInfo() {
      return this.$store.state.user.userInfo.userId;
    },
  },
  created() {
    if (this.getLoginInfo) {
      this.getUserInfo();
      this.isLogin = true;
      this.index = this.$router.currentRoute.value.fullPath.split("/")[2];
    }
  },
  watch: {
    index() {
      this.$forceUpdate();
    },
    $route(to) {
      console.log(to.path.split("/")[2]);
      this.index = to.path.split("/")[2];
      //console.log(from.path);
      // this.index = to.path.split("/")[2];
    },
  },
};
</script>
  
  <style>
.title {
  margin-left: 0px;
  height: 48px;
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #dcdcdc;
  display: flex;
}
.title-left {
  width: 580px;
  height: 48px;
  margin-left: 0;
  background: #fff;
  display: flex;
  justify-content: space-between;
  position: relative;
  left: 90px;
}
.title-left-image {
  height: 48px;
  width: 120px;
}
span {
  font-size: 16px;
}
a {
  width: 70px;
  height: 48px;
  color: black;
  margin: 0px;
  text-decoration: none;
  line-height: 48px;
  text-align: center;
}
a:hover {
  background-color: #bebebe;
}
.serach {
  height: 32px;
  width: 400px;
  background-color: #fff;
  margin: auto;
  display: flex;
  position: relative;
  left: 120px;
}
.inputType {
  width: 400px;
  height: 28px;
  text-indent: 1em;
  line-height: 34px;
  background-color: #fff;
  border: 1px solid black;
  border-top-left-radius: 17px;
  border-bottom-left-radius: 17px;
  font-size: 12px;
}
.inputType:focus {
  outline: none;
  border: 1px solid rgb(230, 32, 213);
}
.button {
  color: #fff;
  text-align: center;
  background: rgba(204, 51, 0, 1);
  border-left: 1px solid rgba(0, 0, 0, 0.45);
  width: 100px;
  height: 32px;
  line-height: 34px;
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
}
.title-right {
  width: 380px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.title-right-image {
  width: 40px;
  height: 40px;
  border: 1px solid black;
  border-radius: 20px;
  margin: auto;
  margin-left: 40px;
}
.title-right-name {
  margin: 0 0 0 10px;
  display: flex;
  align-items: center;
  height: 40px;
}
</style>
    